<template>
    <!-- 添加角色表单对话框 -->
    <el-dialog v-model="dialogVisible" title="分配菜单" width="30%">
        <el-form label-width="120px" ref="formRef">
            <el-tree :data="sysMenuTreeList" ref="tree" show-checkbox default-expand-all :check-on-click-node="true"
                node-key="id" :props="defaultProps" />
            <el-form-item>
                <el-button type="primary" @click="handleSubmit()">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>

import { ref } from 'vue'
import { getSysRoleMenuIds, doAssignMenuIdToSysRole } from '@/api/role-menu';
import { getAllMenusApi } from '@/api/menu';
import { ElMessage } from 'element-plus';


// 控制对话是否展示的变量
const dialogVisible = ref(false)
const formRef = ref()
const emit = defineEmits(['submit'])
const sysMenuTreeList = ref([])
let roleId = ""
const defaultProps = {
    children: 'children',
    label: 'title',
}
const tree = ref()
const rules = ref({


})

//进入添加
const show = async (row: any) => {
    dialogVisible.value = true
    roleId = row.id
    const { data } = await getSysRoleMenuIds(row.id)   // 请求后端地址获取所有的菜单数据，以及当前角色所对应的菜单数据
    sysMenuTreeList.value = (await getAllMenusApi()).data

    tree.value.setCheckedKeys(data)   //
}

const handleSubmit = () => {
    doAssignMenuIdToSysRole({ roleId, menuIdList: tree.value.getCheckedKeys() })
        .then(() => {
            dialogVisible.value = false
            ElMessage.success('分配成功')
        })

}



defineExpose({
    show
})
</script>